<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9.state_abbre</title>
</head>
<body>
<div id="app"></div>

<script src="lib/react.development.js"></script>
<script src="lib/react-dom.development.js"></script>
<script src="lib/babel.min.js"></script>

<script type="text/babel">
    class Weather extends React.Component{
        /*在class中为变量进行赋值可以不使用构造函数。直接进行*/
        state ={isHot: true};

        /*将函数定义为箭头函数 class中的箭头函数中的this指向当前类的实例对象*/
        changeWeather =()=>{
            let {isHot} = this.state;
            this.setState({isHot: !isHot});
        }

         render(){
             return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot? '热':'冷'}</h1>
         }

    }

    ReactDOM.render(<Weather/>,document.getElementById("app"))
</script>
</body>
</html>